<template>
    <div clas="chat">
        <div class="msg-text" id="msg-text"  ref="msg" style="height: 700px;">
            <group>
                <card :header="{title: chat.title}">
                    <div slot="content" class="content" v-for="msg in messages">
                        <div class="chat_message" v-bind:class="{is_current: current_user.id === msg.user_id, not_current: current_user.id != msg.user_id}">
                            <div class="user-img">
                                <img :src="msg.image" @error="defaultImg"/>
                                <br/>
                                <span class="user-name">{{msg.name}}</span>
                            </div>
                            <div class="msg-info" v-if="msg.content">
                                <div class="arrow"></div>
                                <span class="msg-content">{{msg.content}}</span>
                            </div>
                            <div class="msg-info" v-if="msg.file.url">
                            		<div class="arrow"></div>
                            		<img :src="msg.file.url" id="imgId" style="border-radius:0px;left: 2%;height: 70px;width: 70px;" @click="imgClick">
                            </div>
                        </div>
                    </div>
                </card>
            </group>
        </div>
        <div class="m_div">
	        	<card>
	        		<div slot="content" class="card-demo-flex card-demo-content01">
	        			<div class="vux-1px-l vux-1px-r" v-if="isiOS">
	        				<div class="photo">
	        					<input type="file"  name="file" accept="'image/*'" class="style_input" style="opacity: 0"  @change="onFileChange">
	        				</div>
	        			</div>
	        			<div class="vux-1px-l vux-1px-r" v-if="isAndroid">
	        				<div class="photo">
		        				<input type="file"  capture="camera" accept="image/*" name="file" class="style_input"  style="opacity: 0"  @change="onFileChange">
		        			</div>
	        			</div>
	        		</div>
		    </card> 
        		<group>
	            <x-input id="enter-info" v-model="msg" @on-enter="sendMsg" placeholder="请在这里输入文字" ref="enterMsg">
	                <x-button slot="right" type="primary" mini @click.native="sendMsg">发送</x-button>
	            </x-input>
	        </group>
	        <!--<actionsheet v-model="sheet" :menus="menus" @on-click-menu="open"></actionsheet>-->
        </div>
    </div>
</template>
<script>
    import {Group, XInput, XButton, Card, XTextarea,Actionsheet} from 'vux'
export default {
    components: {
        Group,
            XInput,
            XButton,
            Card,
            XTextarea,
            Actionsheet
    },
    data() {
        return {
            id: null,
            chat: {},
            messages: [],
            msg: "",
            current_user: null,
            page: {next_page: 0},
            sheet: false,
            menus:{
                photo: "拍照",
                album: "从相册选择",
                cancel: "取消",
            },
            isiOS:false,
            isAndroid:false,
            imgObj:null,
        }
    },
    watch: {
        messages() {
            this.$nextTick(() => {
                let list = this.$refs.msg
                list.scrollTop = list.scrollHeight
            })
        },
    },
    created() {
        let self = this
        let id = this.$route.params.id
        self.id = id
        self.current_user = this.$current_user
        this.$store.commit("storeState", false)
        this.$store.commit("storeNotify", false)         
        this.$cable.subscriptions.create({
            channel: "ChatChannel",
            chat_id: id
        }, {
            received(data) {
                let el = document.getElementById('msg-text')
                let msg = JSON.parse(data)
                self.messages.push(msg)
            }
        })
        this.fetch_chat()
        let u = navigator.userAgent;
		this.isAndroid = u.indexOf('Android') > -1 ||u.indexOf('Adr') > -1 //android终端
		this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
    },
    mounted(){
        this.height = (document.body.clientHeight) + "px"
        this.$refs.enterMsg.focus()
    },
    methods: {
        fetch_chat() {
            this.$http.get("chats/" + this.id + ".json").then(res => {
                this.chat = res.data.chat;
                this.messages = res.data.messages.reverse()
                this.page = res.data.page;
            })
        },
        defaultImg(row,col){
            row.target.src = "https://images.chuanggj.com/chuang.png"
        },
        sendMsg(){
            let self = this;
            let form = new FormData();
        		if(self.imgObj==="" || self.imgObj===null || self.imgObj===undefined){
    				form.append("content",self.msg)
            }else{
                form.append("file", self.imgObj)
    			}
            self.$http.post("chats/" + self.id + "/send_message", form).then(res => {
            		 console.log(res);
                let data = res.data
                self.msg = ""
            })
        },
      
        onFileChange(e) {
            var files = e.target.files || e.dataTransfer.files
            if (!files.length) return
            this.imgObj=files[0]
            this.sendMsg()
            this.imgObj = null
        },
//      createImage(file, e) {
//          let vm = this;
//          lrz(file[0], {
//              width: 800
//          }).then(rst => {
//          		console.log(rst);
//              vm.imgUrls.push(rst.base64);
//              return rst;
//          }).always(function() {
//              e.target.value = null;
//          });
//      },
//      open(key){}
//		fileUpload(){
//      		this.sheet=true;
//      },
		imgClick(){
			console.log("sadv");
			let imgId = document.getElementById('imgId')
			let width = imgId.offsetWidth
            if(this.width===70){
            		console.log(":sd")
//              imgId.width(200)
//              imgId.height(300)
            }
//          else
//          {
//              img.width(100);
//              img.height(150);
//          }
		}
//		$(function(){
//          $("#imgId").click(function(){
//              var width = $(this).width();
//              if(width==100)
//              {
//                  $(this).width(200);
//                  $(this).height(300);
//              }
//              else
//              {
//                  $(this).width(100);
//                  $(this).height(150);
//              }
//          });
//      });
    }
}
</script>
<style>
	.style_input{
		width: 50px;
		height: 50px;
		overflow: hidden;
		/*opacity: 0;*/
		touch-action: none;
	}
	.album{
		background-image: url(../img/123.png);
		 background-size:contain;
		background-repeat: no-repeat;
		width: 50px;
		height: 50px;
	}
	.photo{
		background-image: url(../img/photo.png);
		 background-size:contain;
		background-repeat: no-repeat;
		width: 50px;
		height: 50px;
	}
	.m_div{
		width: 100%;
	}
	.m_div textarea {
		padding: 10px;
		min-height: 10px;
        width: 80%;
        border: none;
        outline: none;
        /*font-family: "Micrsofot Yahei";*/
        resize: none;
	}
	.msg-content{
		display: inline-block;
	    position: relative;
	    padding: 0 10px;
	    /*max-width: calc(100% - 40px);*/
	    min-height: 30px;
	    line-height: 2.5;
	    font-size: 9pt;
	    text-align: left;
	    word-break: break-all;
	    /*background-color: #fafafa;*/
	    border-radius: 4px;
	}
    .content {
        padding: 10px;
        clear:both;
        position: relative;
        overflow: hidden;   
        background-color: #eee;
    }
    .content img {
        width: 50px;
        height: 50px;
        border-radius: 25px;
    }
    #msg-text {
        overflow: auto;
    }
    .chat_message {
        clear: both;
    }
    .user-img {
        float:left;
        font-size: 12px;
        text-align: center;
    }
    .is_current {
        float: right;
    }
    .is_current .user-img{
        float: right;
    }
    .is_current .msg-info {
        background-color: #5CB700;
        margin-right:60px;
        text-align: right;
    }
    .is_current .arrow {
        right: 66px;
        border-left: 8px solid #5CB700; /* bottom, add background color here */
    }
    .not_current{
    		float: left;
    }
    .not_current .msg-info {
   	 	text-align: left;
    		margin-left:60px;
        background-color: #beceeb;
    }
    .not_current .arrow {
        margin-left: -11px;
        border-right: 8px solid #beceed; /* bottom, add background color here */
    }
    .msg-info {
        padding: 5px;
        /*position: absolute;*/
        /*width: auto;*/
       /*max-width: 80%;*/
        top: 18px;
        border: 1px solid #beceed;
        border-radius: 8px;
        font-size: 15px !important;
    }
    .arrow {
        position: absolute;
        width: 0; 
        height: 0; 
        border-bottom: 8px solid transparent; /* left arrow slant */
        border-top: 8px solid transparent; /* right arrow slant */
        font-size: 0;
        line-height: 0;
        top:25px;
    }
</style>
